<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>个人信息管理</el-breadcrumb-item>
      <el-breadcrumb-item>修改信息</el-breadcrumb-item>
    </el-breadcrumb>

    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索与添加区域 -->


      <!-- 用户列表区域 -->
      <el-form :data="userForm" :model="userForm" border stripe  >
        <el-form-item label="用户名" prop="username"><el-input v-model="userForm.username" disabled></el-input></el-form-item>
        <el-form-item label="姓名" prop="realName"><el-input v-model="userForm.realName" disabled ></el-input></el-form-item>
        <el-form-item label="电话" prop="phone"><el-input v-model="userForm.phone" disabled ></el-input></el-form-item>
      </el-form>


    </el-card>

    <!-- 修改用户的对话框 -->
    <el-dialog title="修改用户" :visible.sync="editUserinfoVisible" width="50%" @close="editUserinfoClosed">
      <el-form :model="editUserForm" :rules="editUserFormRules" ref="editUserFormRef" label-width="70px">
        <el-form-item label="姓名" prop="realName">
          <el-input v-model="editUserForm.realName"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editUserinfoVisible = false">取 消</el-button>
        <el-button type="primary" @click="editUserInfo">确 定</el-button>
      </span>
    </el-dialog>



    <el-row :gutter="20" >
      <el-col :span="4" >
        <el-button type="primary" @click="showeditUserinfo()">修改信息</el-button>
      </el-col>
    </el-row>

  </div>
</template>

<script>
    export default {
        data() {
            // 验证邮箱的规则
            var checkEmail = (rule, value, cb) => {
                // 验证邮箱的正则表达式
                const regEmail = /^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(\.[a-zA-Z0-9_-])+/

                if (regEmail.test(value)) {
                    // 合法的邮箱
                    return cb()
                }

                cb(new Error('请输入合法的邮箱'))
            }

            // 验证手机号的规则
            var checkMobile = (rule, value, cb) => {
                // 验证手机号的正则表达式
                const regMobile = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/

                if (regMobile.test(value)) {
                    return cb()
                }

                cb(new Error('请输入合法的手机号'))
            }

            return {
                // 获取用户列表的参数对象
                userForm: [],
                total: 0,
                // 控制修改用户对话框的显示与隐藏
                editUserinfoVisible: false,
                // 查询到的用户信息对象
                editUserForm: {
                    realName: '',
                },
                // 修改表单的验证规则对象
                editUserFormRules: {
                    realName: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        {min: 3, max: 10, message: '用户名的长度在3~10个字符之间', trigger: 'blur'}
                    ],
                },
                // 控制分配角色对话框的显示与隐藏
                setRoleDialogVisible: false,
                // 需要被分配角色的用户信息
                userInfo: {},
                // 所有角色的数据列表
                rolesList: [],
                // 已选中的角色Id值
                selectedRoleId: ''
            }
        },
        created() {
            this.getuserForm()
        },
        methods: {
            async getuserForm() {
                const { data: res } = await this.$http.get('/user')
                if (res.code !== 200) {
                    return this.$message.error(res.msg)
                }
                this.userForm = res.data
                console.log(this.userForm)
            },


            // 展示编辑用户的对话框
            async showeditUserinfo() {
                // console.log(id)
                const { data: res } = await this.$http.get('/user')
                
                if (res.code !== 200) {
                    return this.$message.error(res.msg)
                }
                console.log(res.data)
                this.editUserForm = res.data
                this.editUserinfoVisible = true
            },
            // 监听修改用户对话框的关闭事件
            editUserinfoClosed() {
                this.$refs.editUserFormRef.resetFields()
            },
            // 修改用户信息并提交
            editUserInfo() {
            	let form = new FormData()
            	form.append('realName',this.editUserForm.realName)
                this.$refs.editUserFormRef.validate(async valid => {
                    if (!valid) return
                    // 发起修改用户信息的数据请求
                    const { data: res } = await this.$http.put( 'user/',form )

               if (res.code !== 200) {
                  return this.$message.error(res.msg)
              }

                    // 关闭对话框
                    this.editUserinfoVisible = false
                    // 刷新数据列表
                    this.getuserForm()
                    // 提示修改成功
                    this.$message.success('更新用户信息成功！')
                })
            }
        }
    }
</script>

<style lang="less" scoped>
  .el-col {
    margin-top: 30px;
    float:right;
  }
</style>
